<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        .head-img,
        .main {
            display: inline-block;
        }

        .main {
            line-height: 44px;
        }

        .head-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* 图片与文字对齐 */
            /* vertical-align: middle; */
        }
    </style>
</head>

<body>
    <div class="bbs">
        <header><span id="will">我要发帖</span></header>
        <section>
            <ul id="list">
                <!-- <li>
                    <img src="images/tou01.jpg" class="head-img" />
                    <div class="main">
                        <h3>标题</h3>
                        <p>内容</p>
                        <span>板块</span>
                        <span>发布时间</span>
                    </div>
                </li> -->
            </ul>
        </section>
        <div class="post">
            <input class="title" type="text" placeholder="请输入标题（1-50个字符）">
            所属版块：<select class="block" >
                <option>请选择版块</option>
                <option>电子书籍</option>
                <option>新课来了</option>
                <option>新手报到</option>
                <option>职业规划</option>
            </select>
            <textarea class="content" type="text"></textarea>
            <input class="btn" value="发布">
        </div>
    </div>
    <script>


        // 发布按钮
        $('.btn').click(function () {
            // 拿到输入框，下拉列表框，textarea标签的值
            // console.log('新贴子的标题：', $('.title').val());
            // console.log('新贴子的板块：', $('.block').val());
            // console.log('新贴子的内容：', $('.content').val());
            var date = new Date();
            // 日期格式：年-月-日 时:分:秒
            var now = '发布时间：' + date.getFullYear() + '-' +
                (date.getMonth() + 1) + '-' + date.getDate() + ' ' +
                date.getHours() + ':' + date.getMinutes() + ':' +
                date.getSeconds();

            // 参照页面结构创建li标签，包含：头像，标题，板块，内容，时间
            //var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
            var tou=['images/tou01.jpg','images/tou02.jpg','images/tou03.jpg','images/tou04.jpg']
            var img=Math.floor(Math.random()*4);  //随机获取头像
            var newLi = $('<li></li>');
            var headImg = $('<img src="'+tou[img]+'" class="head-img"/>');
            var newDiv = $('<div class="main"></div>');
            // 标题，内容，板块，时间，，属于main的div
            var newH3 = $('<h3>' + $('.title').val() + '</h3>');
            var newP = $('<p>' + $('.content').val() + '</p>');
            var newSpan1 = $('<span>板块：' + $('.block').val() + '&nbsp;&nbsp;</span>');
            var newSpan2 = $('<span>' + now + '</span>');
            // 把标题，板块，时间 加到class为main的div中
            newDiv.append(newH3);
            newDiv.append(newP);
            newDiv.append(newSpan1);
            newDiv.append(newSpan2);
            // 把头像，main的div加到li中， 
            newLi.append(headImg);
            newLi.append(newDiv);
            // 把li添加到ul列表中，新内容出现在第1的位置
            $('#list').prepend(newLi);
            $('.post').hide(); // 消失  display:none


            //2.新帖子的div消失之后，清空输入框和文本域的内容
            $(".title").val("");
            $(".block").val("");
            $(".content").val("");


        });
        // 我要发帖按钮
        /*$('#will').click(function () {
            console.log('我要发贴。。');
            // 让新帖子的内容出现
            $('.post').show();
        });*/
        $('#will').click(function () {
            console.log('我要发帖关贴。。');
            // 3.我要发帖按钮，循环点击 会让帖子切换显示和隐藏
            $('.post').toggle();
        });


        /* 
            作业练习：
            1.随机头像4个
            2.新帖子的div消失之后，清空输入框和文本域的内容
            3.我要发帖按钮，循环点击 会让帖子切换显示和隐藏
            *可以先在页面上写好结构和样式，操作时，直接为新的元素添加对应的class或者id
        */
    </script>
</body>

</html>